<template>
  <div class="px-[16px] pt-[16px] bg-[#fff] rounded-[8px] mt-[8px] pb-[16px]">
    <div class="flex is-justify-space-between">
      <FormTitle title="明细信息" />
      <div class="flex w-[50%] font-bold">
        <div class="w-full">
          申请付款金额CNY:&nbsp;&nbsp; {{ totalReqPayAmount }}
        </div>
        <div class="w-full ml-[8px]">
          扣款金额CNY:&nbsp;&nbsp; {{ totalCutAmount }}
        </div>
      </div>
    </div>
    <vxe-grid v-bind="tableOptions" min-height="300px" ref="tableRef">
      <template #receive_account_name="{ row }">
        <el-input v-model="row.receive_account_name" placeholder="请输入" />
      </template>
      <template #receive_account_number="{ row }">
        <el-input v-model="row.receive_account_number" placeholder="请输入" />
      </template>
      <template #opening_bank="{ row }">
        <el-input v-model="row.opening_bank" placeholder="请输入" />
      </template>
      <template #req_pay_amount="{ row }">
        <el-input
          v-model="row.req_pay_amount"
          placeholder="请输入"
          @change="handlePayAmount(row)"
        />
      </template>
      <template #cut_amount="{ row }">
        <el-input
          v-model="row.cut_amount"
          placeholder="请输入"
          @change="handleCutAmount(row)"
        />
      </template>
      <template #remark="{ row }">
        <el-input v-model="row.remark" placeholder="请输入" />
      </template>
    </vxe-grid>
  </div>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import FormTitle from "@/components/Form/FormTitle.vue";
const props = defineProps({
  data: { type: Object, default: () => ({}) },
});
const tableOptions = reactive({
  round: true,
  columnConfig: {
    resizable: true,
  },
  showOverflow: false,
  data: [],
  columns: [
    {
      title: "账单编号",
      minWidth: 130,
      field: "bill_number",
    },
    {
      title: "币种",
      minWidth: 60,
      field: "pay_currency",
    },
    {
      title: "金额",
      minWidth: 140,
      field: "pay_amount",
    },
    {
      title: "付款主体",
      minWidth: 140,
      field: "pay_main_company_name",
    },
    {
      title: "申请付款金额",
      minWidth: 160,
      slots: {
        default: "req_pay_amount",
      },
    },
    {
      title: "扣款金额",
      minWidth: 160,
      slots: {
        default: "cut_amount",
      },
    },
    {
      title: "收款账户名",
      minWidth: 160,
      field: "receive_account_name",
      slots: {
        default: "receive_account_name",
      },
    },
    {
      title: "收款账号",
      minWidth: 160,
      field: "receive_account_number",
      slots: {
        default: "receive_account_number",
      },
    },
    {
      title: "开户行",
      minWidth: 160,
      field: "opening_bank",
      slots: {
        default: "opening_bank",
      },
    },
    {
      title: "备注",
      minWidth: 160,
      slots: {
        default: "remark",
      },
    },
  ],
});

watch(
  () => props.data,
  () => {
    tableOptions.data = props?.data?.details || [];
  },
  {
    immediate: true,
  }
);
const tableRef = ref();
const tableDataAll = () => {
  return tableRef.value?.getTableData?.().fullData || [];
};
// 计算 req_pay_amount 的折算总额
const totalReqPayAmount = computed(() => {
  const sum = tableDataAll().reduce((sum, row) => {
    const amount = Number(row.req_pay_amount || 0);
    const rate = Number(row.pay_exchange_rate || 1);
    return sum + amount * rate;
  }, 0);
  return sum.toFixed(4);
});

// 计算 cut_amount 的折算总额
const totalCutAmount = computed(() => {
  const sum = tableDataAll().reduce((sum, row) => {
    const amount = Number(row.cut_amount || 0);
    const rate = Number(row.pay_exchange_rate || 1);
    return sum + amount * rate;
  }, 0);
  return sum.toFixed(4);
});

const handlePayAmount = (row) => {
  if (Number(row?.pay_amount || 0) < Number(row?.req_pay_amount || 0)) {
    row.req_pay_amount = 0;
    ElMessage.warning("申请付款金额不能大于全部金额!");
  }
  let total = Number(row?.req_pay_amount || 0) + Number(row?.cut_amount);
  if (Number(row?.pay_amount || 0) < total) {
    ElMessage.warning("[申请付款金额] + [扣款金额]不能大于[全部金额]!");
    row.req_pay_amount = 0;
  }
};
const handleCutAmount = (row) => {
  if (Number(row?.req_pay_amount || 0) < Number(row?.cut_amount || 0)) {
    row.cut_amount = 0;
    ElMessage.warning("扣款金额不能大于申请付款金额!");
  }
  let total = Number(row?.req_pay_amount || 0) + Number(row?.cut_amount || 0);
  if (Number(row?.pay_amount || 0) < total) {
    ElMessage.warning("[申请付款金额] + [扣款金额]不能大于[全部金额]!");
    row.cut_amount = 0;
  }
};
defineExpose({
  tableDataAll,
});
</script>

<style lang="scss" scoped>
.text {
  color: #cf6573;
}
</style>
